<template>
  <div class="evaluation">
    <div>
      <van-nav-bar
        title="快递单评价"
        left-arrow
        :right-text="isShowRight ? '' : '提交'"
        @click-right="rightClick"
        @click-left="leftClick"
      >
        <template #right v-if="isShowRight">
          <van-icon name="wap-home-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="score">
      <h3>总体评分</h3>
      <div :style="{ color: 'orange' }">
        <span class="num">{{ totalScore * 2 }}</span>
        <span>分</span>
      </div>
      <!-- Math.floor((this.shopScore + this.speedScore + this.expressScore)/3)*2 -->
      <van-rate
        v-model="totalScore"
        @change="onChange"
        :gutter="20"
        :size="30"
        color="#ffd21e"
        :icon="icon"
        :void-icon="voidIcon"
        void-color="#eee"
        readonly
      />
    </div>
    <div class="shopScore">
      <van-cell value="店铺评分" />
      <van-row type="flex" justify="center">
        <van-col span="5">店铺评分</van-col>
        <van-col span="13">
          <van-rate
            v-model="shopScore"
            :size="25"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            :readonly="isShowRight"
            @change="totalScore = Math.floor((shopScore + speedScore + expressScore)/3)"
        /></van-col>
      </van-row>
      <van-row type="flex" justify="center">
        <van-col span="5">物流速度</van-col>
        <van-col span="13">
          <van-rate
            v-model="speedScore"
            :size="25"
            color="orange"
            void-icon="star"
            void-color="#eee"
            :readonly="isShowRight"
            @change="totalScore = Math.floor((shopScore + speedScore + expressScore)/3)"

        /></van-col>
      </van-row>
      <van-row type="flex" justify="center">
        <van-col span="5">快递评分</van-col>
        <van-col span="13">
          <van-rate
            v-model="expressScore"
            :size="25"
            color="red"
            void-icon="star"
            void-color="#eee"
            :readonly="isShowRight"
            @change="totalScore = Math.floor((shopScore + speedScore + expressScore)/3)"
        /></van-col>
      </van-row>
    </div>
    <div>
      <van-cell-group>
        <van-field
          v-model="textvalue"
          :placeholder="isShowRight ? info : '请输入内容'"
          :readonly="isShowRight ? true : false"
        />
      </van-cell-group>
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="5"
        :disabled="isShowRight ? true : false"
        :deletable="isShowRight ? false : true"
      />
    </div>
  </div>
</template>

<script>
import { GetEvaluationData, Star } from "@/request/api";
export default {
  data() {
    return {
      shopScore: 0,
      speedScore: 0,
      expressScore: 0,
      icon: require("@/assets/img/xiaolian.png"),
      voidIcon: require("@/assets/img/shangxin.png"),
      textvalue: "",
      id: this.$route.query.id,
      // 是否已评价
      star: this.$route.query.star,
      //评价内容
      info: this.$route.query.info || "此用户没有评论",
      fileList: [
        // { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],

      // 详情页评分
      // 订单编码
      orderCode: "",

      // 控制导航栏右侧图标
      isShowRight: true,

      // 总评分
      totalScore: 0,
    };
  },
  methods: {
    onChange() {
      console.log("当前值：" + val);
    },
    rightClick() {
      if (this.isShowRight == false) {
        Star({
          shop: this.shopScore,
          logistics: this.speedScore,
          express: this.expressScore,
          totalScore: this.totalScore,
          orderCode: this.orderCode,
          id: this.id,
          info: this.textvalue,
        }).then((res) => {
          console.log("提交成功");
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } else {
        this.$router.push("/");
      }
    },
    leftClick() {
      this.$router.go(-1);
    },
  },
  created() {
    if (this.star == "0") {
      this.isShowRight = false;
    }
    GetEvaluationData(this.id).then((res) => {
      console.log(res);
      this.totalScore = res.data.totalScore;
      this.speedScore = res.data.logistics;
      this.expressScore = res.data.express;
      this.shopScore = res.data.shop;
      this.textvalue = res.data.info;
      this.orderCode = res.data.orderCode;
      res.data.imgs.map((item) => {
        return this.fileList.push({ url: item });
      });
    });
  },
};
</script>
 
<style lang = "less" scoped>
.evaluation {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
.score {
  background-color: #fff;
  text-align: center;

  h3 {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin: 0;
    color: #ccc;
  }
}
.num {
  font-size: 40px;
}
.shopScore {
  background-color: #fff;
  margin-bottom: 10px;
  .van-cell__value {
    line-height: 40px;
  }
  .van-col {
    height: 40px;
    line-height: 40px;
  }
  .van-col--13 {
    padding-top: 5px;
  }
}
.van-field {
  min-height: 100px;
}
.van-uploader {
  padding: 10px;
}
</style>